<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>我的订单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container order" style="border:0;padding:0">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right" v-if="loading">
                <div class="order-box">
                    <div class="line-ti">
                        <div>我的订单</div>
                    </div>
                    <div style="height:50px"></div>
                    <div class="block">
                        <el-date-picker v-model="date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <div style="height:50px"></div>
                    <div class="tab">
                        <div class="tabs" :class="type == 1?'select':''" @click="changeOrder(1)">待发货</div>
                        <div class="tabs" :class="type == 2?'select':''" @click="changeOrder(2)">待收货</div>
                        <div class="tabs" :class="type == 3?'select':''" @click="changeOrder(3)">已完成</div>
                    </div>
                    <div v-for="(item,index) in orderList" :key="index" class="order">
                        <!-- <div class=""> -->
                        <img class="select-icon" @click.stop="itemSelect(index)" :src="item.select?$global.Image.icon_checked:$global.Image.icon_checked_grey" />
                        <img :src="item.cartInfo[0].productInfo.image" class="order-l" alt="">
                        <div class="order-r">
                            <div class="order-t">
                                <div class="order-tit">{{item.order_name || item.cartInfo[0].productInfo.store_name}}{{!item.order_name && index>0?'等商品':''}}</div>
                                <div class="order-express"></div>
                                <!-- <div class="line1"></div> -->
                                <div class="order-date">{{item._add_time}}</div>
                            </div>
                            <div class="order-b">
                                <div class="order-b-l">
                                    <div class="order-b-l-top">
                                        <div class="price">￥{{item.pay_price}}</div>
                                        <!-- <div class="choise">规格：白色 / 6200</div> -->
                                        <div class="num">× {{item.total_num}}</div>
                                    </div>
                                    <div class="remark" v-if="item.remark">备注：{{item.remark}}</div>
                                </div>

                                <div class="order-b-r">
                                    <div class="look-detail" v-if="type == 2" @click="showDialog1 = true;cardId=item.order_id">确认收货</div>
                                    <div class="grayline" v-if="type == 2"></div>
                                    <router-link :to="`/orderDetails/${item.order_id}`" class="contact">查看详情</router-link>
                                    <div class="grayline" v-if="type == 2 || type == 1"></div>
                                    <div class="contact" v-if="type == 2 || type == 1" @click.stop="$refs.contact.contactShow = true">联系客服</div>
                                    <div class="grayline" v-if="type == 3"></div>
                                    <div class="contact" v-if="type == 3" @click.stop="$refs.contact.contactShow = true">售后/联系客服</div>
                                    <div class="grayline" v-if="type == 3"></div>
                                    <div class="contact" v-if="type == 3" @click.stop="delOrder1(item.order_id)">删除订单</div>
                                </div>
                            </div>
                            <!-- </div> -->
                        </div>
                    </div>
                    <div class="nodata" v-if="orderList.length == 0">
                        <img :src="$global.Image.noOrder" />
                    </div>
                    <div class="cart-bottom">
                        <div class="container td-fbc">
                            <div class="td-fbc left" style="flex:1">
                                <label class="td-fbc btn-cp" @click="exportGood">
                                    导出
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- pagination -->
                    <div class="pagination-box">
                        <el-pagination background layout="prev, pager, next" @current-change="_handelClickPage" :page-size="limit" :total="count"></el-pagination>
                    </div>
                    <!-- pagination -->
                </div>
            </div>
        </div>
        <contact ref="contact"></contact>
        <div v-show="showDialog1">
            <div class="add-address-show">
                <div class="title">
                    <div>确认收货</div>
                    <img :src="$global.Image.icon_close" @click="_cancelDialog" />
                </div>
                <div class="add-input">
                    <div class="titles">是否确认收货？</div>
                    <el-form class="rule-form">
                        <el-form-item>
                            <el-button class="btn-r" type="primary" style="width: 240px;" @click="_confirmDialog">确认</el-button>
                            <el-button class="btn-b" style="width: 240px;color:#fff !important" @click="_cancelDialog">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="dialog-shade"></div>
        </div>
        <div v-show="showDialog2">
            <div class="add-address-show1">
                <div class="title">
                    <div>清单导出</div>
                    <img :src="$global.Image.icon_close" @click="_cancelDialog" />
                </div>
                <div class="add-input">

                    <div class="email">
                        <div class="email-tit"><span>*</span>收件邮箱</div>
                        <el-input v-model="email" placeholder="请输入收件邮箱"></el-input>
                    </div>
                    <div class="history" v-if="historyEmail.length">
                        <div class="history-list">
                            <div class="" v-for="(item,index) in historyEmail" :key="index" @click="historyClick(item)">
                                <img @click.stop="delHistory(index)" src="../../assets/second_icon/close_icon.png" alt="">
                                {{item}}
                            </div>
                        </div>
                    </div>
                    <div class="choose-type">
                        <div class="cancel" @click="_cancelDialog2">取消</div>
                        <div class="confirm" @click="_confirmDialog1">确认</div>
                    </div>
                </div>
            </div>
            <div class="dialog-shade"></div>
        </div>
    </div>
</template>

<script>
import { exportProduct } from "@api/user";
import contact from "@/components/contact";
import leftNavBar from "@components/leftNavBar";
import { getOrderData, getOrderListPc, takeOrder, delOrder } from "@api/order";
import {
    cancelOrderHandle,
    payOrderHandle,
    takeOrderHandle,
} from "@libs/order";

export default {
    components: {
        leftNavBar,
        contact,
    },
    data() {
        return {
            active: 2,
            show: false,
            status: 0,
            historyEmail: [],
            loading: true,
            showDialog2: false,
            start: "",
            date: "",
            end: "",
            page: 1,
            showDialog1: false,
            selectId: [],
            limit: 10,
            count: 0,
            cardId: "",
            email: "",
            type: 1,
            orderData: {},
            orderList: [],
            activeName: "5",
            selectGood: [],
        };
    },
    watch: {
        date(e) {
            console.log(e);
            if (e == null) {
                this.start = "";
                this.end = "";
                this.getOrderList();
                return;
            }
            this.start = e[0];
            this.end = e[1];
            this.getOrderList();
        },
    },
    created() {
        if (this.$route.query.type != undefined) {
            this.type = this.$route.query.type;
            this.activeName = String(this.$route.query.type);
        }
    },
    mounted() {
        // this.getOrderData();
        this.getOrderList();
        if (localStorage.getItem("historyEmail")) {
            this.historyEmail = JSON.parse(
                localStorage.getItem("historyEmail")
            );
        }
    },
    methods: {
        delOrder1(uni) {
            this.$confirm("是否删除此订单", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    delOrder(uni).then((res) => {
                        if (res.status != 200) {
                            this.$dialog.toast({ mes: res.msg });
                            return;
                        } else {
                            this.$dialog.toast({ mes: res.msg });
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        }
                    });
                })
                .catch(() => {});
        },
        delHistory(index) {
            this.historyEmail.splice(index, 1);
            let arr = this.historyEmail;

            localStorage.setItem("historyEmail", JSON.stringify(arr));
            console.log(this.historyEmail, arr);
        },
        historyClick(e) {
            this.email = e;
        },
        exportGood() {
            let selectGood = this.selectGood;
            let selectId = this.selectId;
            if (selectGood.length == 0) {
                return;
            }
            this.selectGood.map((item, index) => {
                selectId.push(item.id);
            });
            this.selectId = selectId;
            this.showDialog2 = true;
        },
        itemSelect(index) {
            this.orderList[index].select = !this.orderList[index].select;
            let orderList = this.orderList;
            let selectGood = this.selectGood;
            selectGood = [];
            orderList.map((item, index1) => {
                if (item.select) {
                    selectGood.push(item);
                }
            });
            this.selectGood = selectGood;
            this.$forceUpdate();
        },
        _cancelDialog2() {
            this.showDialog2 = false;
        },
        _cancelDialog() {
            this.showDialog1 = false;
        },
        openService() {
            let customerInfo = JSON.parse(localStorage.getItem("customerInfo"));
            window.open(customerInfo[0].dir, "_blank");
        },
        _confirmDialog1() {
            let that = this;
            if (!that.email) {
                that.$dialog.toast({ mes: "请输入收件邮箱" });
                return;
            }
            if (!that.selectId.length) {
                that.$dialog.toast({ mes: "请选择要导出的订单" });
                return;
            }
            let id = that.selectId;
            let params = {
                type: 1,
                id: id.join(","),
                email: that.email,
            };
            exportProduct(params)
                .then(function (res) {
                    if (res.status != 200) {
                        that.$dialog.toast({ mes: res.msg });
                        return;
                    }
                    let arr =
                        JSON.parse(localStorage.getItem("historyEmail")) || [];

                    arr = arr.concat(that.email);
                    localStorage.setItem("historyEmail", JSON.stringify(arr));
                    that.historyEmail = arr;
                    that.$dialog.toast({ mes: "导出成功，请注意查收邮件。" });

                    that.showDialog2 = false;
                    setTimeout(() => {
                        that.getOrderList();
                    }, 1000);
                })
                .catch((err) => {
                    that.$dialog.error(err.msg);
                });
        },
        // 变更订单
        changeOrder(index) {
            this.type = index;
            this.orderList = [];
            this.getOrderList();
        },
        // 确认收货订单
        _confirmDialog() {
            takeOrder(this.cardId)
                .then((res) => {
                    if (res.status == 200) {
                        this.$dialog.success("收货成功");
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    }
                    return;
                    this.$dialog.error(res.msg);
                })
                .catch((err) => {
                    console.log(err);
                    this.$dialog.error(err.msg);
                });
        },
        // 获取订单数据
        getOrderData() {
            getOrderData().then((res) => {
                this.orderData = res.data;
                this.orderStatus[0].name = `待付款(${res.data.unpaid_count})`;
                this.orderStatus[1].name = `待发货(${res.data.unshipped_count})`;
                this.orderStatus[2].name = `待收货(${res.data.received_count})`;
                this.orderStatus[3].name = `待评价(${res.data.evaluated_count})`;
                this.orderStatus[4].name = `已完成(${res.data.complete_count})`;
                this.orderStatus[5].name = `退款/售后(${res.data.refund_count})`;
                this.loading = true;
            });
        },
        // 获取订单列表
        getOrderList() {
            const { page, limit, type, start, end } = this;
            getOrderListPc({
                page,
                limit,
                type,
                end,
                start,
            }).then((res) => {
                let data = res.data.list;
                if (data.length) {
                    data.map((item, index) => {
                        item.select = false;
                    });
                }

                this.orderList = data;
                this.count = res.data.count || 0;
            });
        },
        // 分类
        _handelClickOrderType(e) {
            let type = e.name;
            this.type = type;
            this.getOrderList();
        },
        // 分页
        _handelClickPage(val) {
            this.page = val;
            this.getOrderList();
        },
        // 取消订单
        cancelOrder(order) {
            cancelOrderHandle(order.order_id)
                .then(() => {
                    this.getOrderData();
                    this.orderList.splice(this.orderList.indexOf(order), 1);
                })
                .catch(() => {
                    this.reload();
                });
        },
        // 收货
        takeOrder(order) {
            this.$dialog.loading.open("正在加载中");
            takeOrderHandle(order.order_id)
                .then((res) => {
                    if (
                        (res.data.gain_integral != "0.00" &&
                            res.data.gain_coupon != "0.00") ||
                        (res.data.gain_integral > 0 && res.data.gain_coupon > 0)
                    ) {
                        this.$dialog.loading.close();
                        this.$dialog.confirm({
                            title: "恭喜您获得优惠礼包",
                            mes: `恭喜您获得${res.data.gain_coupon}元优惠券以及${res.data.gain_integral}积分，购买商品时可抵现哦～`,
                            opts: () => {
                                this.getOrderData();
                                this.getOrderList();
                            },
                        });
                    } else if (
                        res.data.gain_integral != "0.00" ||
                        res.data.gain_integral > 0
                    ) {
                        this.$dialog.loading.close();
                        this.$dialog.confirm({
                            title: "赠送积分",
                            mes: `恭喜您获得${res.data.gain_integral}积分，购买商品时可抵现哦～`,
                            opts: () => {
                                this.getOrderData();
                                this.getOrderList();
                            },
                        });
                    } else if (
                        res.data.gain_coupon != "0.00" ||
                        res.data.gain_coupon > 0
                    ) {
                        this.$dialog.loading.close();
                        this.$dialog.confirm({
                            title: "恭喜您获得优惠券",
                            mes: `恭喜您获得${res.data.gain_coupon}元优惠券，购买商品时可抵现哦～`,
                            opts: () => {
                                this.getOrderData();
                                this.getOrderList();
                            },
                        });
                    } else {
                        this.$dialog.loading.close();
                        this.$dialog.success("收货成功");
                        this.getOrderData();
                        this.getOrderList();
                    }
                })
                .catch((err) => {
                    this.$dialog.loading.close();
                    this.$dialog.error(err.msg);
                });
        },
        // 去支付
        paymentTap(order) {
            this.$router.push({
                path: "/pay/" + order.order_id + "?type=" + 1,
            });
        },

        pay() {
            this.$router.replace({
                path: "/orderDetails",
            });
        },
        evaluate() {
            this.show = true;
        },
    },
};
</script>
<style >
.el-form-item__content {
    justify-content: space-between;
    display: flex;
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss">
$color: #da213d;
.el-tabs__item.is-active {
    color: #da213d;
}
.tab {
    display: flex;
    height: 80px;
    align-items: center;
    .tabs {
        cursor: pointer;
        font-size: 18px;
        text-align: center;
        color: #666666;
        margin-right: 60px;
    }
    .tabs.select {
        color: #da213d;
        font-weight: bold;
        position: relative;
        &::before {
            position: absolute;
            bottom: -9px;
            left: 0;
            right: 0;
            width: 41px;
            height: 5px;
            background: #da213d;
            margin: 0 auto;
            content: "";
        }
    }
}
.dialog-shade {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 18;
    background-color: rgba($color: #000000, $alpha: 0.4);
}
.email {
    display: flex;
    margin-top: 20px;
    .email-tit {
        font-size: 15px;
        width: 100px;
        line-height: 40px;
        span {
            color: #da213d;
            font-size: 15px;
        }
    }
    .el-input {
        width: 400px;
    }
}
.dialog-shade {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 18;
    background-color: rgba($color: #000000, $alpha: 0.4);
}
.choose-type {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
    padding: 0 70px;
    box-sizing: border-box;
    .cancel {
        width: 242px;
        height: 46px;
        border: 1px solid #da213d;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #da213d;
        line-height: 46px;
        cursor: pointer;
    }
    .confirm {
        width: 240px;
        height: 44px;
        background: #da213d;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #ffffff;
        line-height: 44px;
        cursor: pointer;
    }
}
.line-ti {
    width: 100%;
    border-bottom: 3px solid #dbdbdb;
    height: 40px;
    > div {
        color: #da213d;
        font-size: 18px;
        font-family: MicrosoftYaHei-Bold;
        border-bottom: 3px solid $color;
        width: 72px;
        height: 40px;
        font-weight: bold;
        line-height: 36px;
        padding-left: 5px;
    }
}
.order {
    display: flex;
    border: 1px solid #efc2c1;
    padding: 30px 20px;
    box-sizing: border-box;
    // margin-top: 10px;
    .select-icon {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-top: auto;
        margin-bottom: auto;
    }
    .order-l {
        width: 120px;
        height: 120px;
    }
    .order-r {
        margin-left: 20px;
        flex: 1;
        .order-t {
            display: flex;
            .order-tit {
                font-size: 18px;
                font-weight: bold;
                text-align: left;
                color: #333333;
                line-height: 24px;
                flex: 1;
            }
            .order-express {
                margin-left: 67px;
                font-size: 16px;
                color: rgb(51, 51, 51);
                line-height: 21px;
            }
            .line1 {
                background: #333333;
                margin: 3px 20px;
                width: 2px;
                height: 15px;
            }
            .order-date {
                font-size: 16px;
                color: #333333;
                line-height: 21px;
            }
        }
        .order-b {
            display: flex;
            align-items: center;
            .order-b-l {
                flex: 1;
                .order-b-l-top {
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                    .price {
                        font-size: 20px;
                        font-weight: 500;
                        color: #da213d;
                        margin-right: 23px;
                    }
                    .choise {
                        font-size: 14px;
                        color: #666666;
                        margin-right: 61px;
                    }
                    .num {
                        font-size: 14px;
                        color: #666666;
                    }
                }
                .remark {
                    margin-top: 15px;
                    font-size: 12px;
                    color: #666666;
                }
            }
            .order-b-r {
                display: flex;
                align-items: center;
                .look-detail {
                    font-size: 18px;
                    color: #333333;
                    cursor: pointer;
                }
                .grayline {
                    width: 2px;
                    height: 20px;
                    background: #ecdfdd;
                    border-radius: 1px;
                    margin: 0 20px;
                    cursor: pointer;
                }
                .contact {
                    font-size: 18px;
                    color: #333333;
                    cursor: pointer;
                }
            }
        }
    }
}
.history {
    width: 400px;
    margin: 20px auto 20px;
    .history-list {
        display: flex;
        flex-wrap: wrap;
        div {
            border-radius: 10px;
            padding: 5px;
            box-sizing: border-box;
            font-size: 16px;
            line-height: 16px;
            color: #999;
            background: #f8f8f8;
            margin: 0px 5px 5px;
            cursor: pointer;
            position: relative;
            img {
                position: absolute;
                right: -10px;
                top: -10px;
                width: 20px;
                height: 20px;
            }
        }
    }
}
.order-list {
    table {
        width: 100%;
        border-collapse: collapse;

        .sep-row {
            div {
                height: 20px;
            }
        }

        .tr-th {
            background-color: #e5e5e5;
            border: solid #e5e5e5;
            border-width: 1px 1px 0 1px;
        }

        .tr-tbd {
            border: solid #e5e5e5 1px;
        }

        .goods-box {
            padding: 10px;
        }

        td {
            border: 1px solid #e5e5e5;
        }

        thead tr {
            background-color: #e5e5e5;

            th {
                font-size: 13px;
                color: #666;
                padding: 10px 0;
            }
        }

        .money .status {
            display: inline-block;
            border-top: solid #eee 1px;
            padding-top: 10px;
            margin-top: 10px;
            width: 60px;
            text-align: center;
        }
    }

    .tx-c {
        text-align: center;
    }

    .order-top {
        padding: 10px;

        span {
            font-size: 12px;
            color: #666;
            margin-right: 20px;
            cursor: pointer;
        }

        img {
            display: block;
            margin-right: 8px;
            width: 14px;
            height: 14px;
            object-fit: contain;
        }
    }

    .goods-img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        cursor: pointer;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .goods-info {
        width: 260px;
        font-size: 12px;

        .tit {
            color: #333;
            font-size: 13px;
            line-height: 1.6;
            width: 400px;
            cursor: pointer;
        }

        .attr {
            margin-top: 5px;
            color: #999;
        }
    }

    .goods-num {
        width: 60px;
        text-align: center;
        color: #999;

        span {
            color: #333;
            font-size: 14px;
        }
    }

    .btn-div {
        .bnt {
            padding: 5px 0;
            cursor: pointer;
        }

        .bnt:hover {
            color: $color;
        }

        .bg-color-red {
            color: $color;
        }
    }
}

.order {
    display: flex;

    .right {
        width: 1000px;
        margin-left: 32px;
    }
    .order-box {
        .order-num {
            color: red;
        }
    }
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss">
$color: #da213d;
.cart-bottom {
    background-color: #fff;
    left: 0;
    width: 100%;
    .container {
        height: 80px;
    }
    .icon-checked {
        height: 20px;
        width: 20px;
        object-fit: contain;
        margin-right: 10px;
    }
    .left {
        .btn-cp {
            cursor: pointer;
            width: 108px;
            display: block;
            font-size: 13px;
            text-align: center;
            color: #ffffff;
            line-height: 34px;
            height: 34px;
            background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
            border-radius: 5px;
            margin-right: auto;
        }

        .btn-cp:hover {
            // color: #da213d;
            span {
                color: #da213d;
            }
        }
        span {
            font-size: 16px;
            color: #333;
        }
        .choose-good {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex: 1;
            margin-right: 68px;
        }
        .span-btn {
            color: #666;
            padding-left: 40px;
            b {
                font-size: 18px;
                padding: 0 4px;
            }
        }
    }
    .total-box {
        font-size: 16px;
        color: #333;
        margin-right: 70px;
        height: 60px;
        span {
            font-size: 24px;
            font-weight: 600;
            color: #da213d;
        }
        .discount {
            font-size: 14px;
            color: #999;
        }
    }
    .btn-r {
        height: 80px;
        width: 200px;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: 2px;
        color: #ffffff !important;
    }
}
.add-address-show {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 200px;
    width: 700px;
    height: 300px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.2);
    margin: auto;
    z-index: 20;
    .title {
        display: flex;
        width: 100%;
        height: 67px;
        align-items: center;
        background: #fbf0f0;
        justify-content: center;
        > div:nth-of-type(1) {
            font-size: 21px;
            color: #da213d;
        }
        img {
            display: block;
            width: 20px;
            height: 20px;
            font-size: 30px;
            color: #999999;
            position: absolute;
            right: 32px;
            cursor: pointer;
        }
    }
    .add-input {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 60px 0 30px;
    }
    .rule-form {
        width: 540px;
        justify-content: space-between;
        margin-top: 60px;
        button {
            width: 140px;
        }
        .btn-b {
            width: 240px;
            border-color: #da213d !important;
            background: #da213d !important;
            border-radius: 5px;
        }
        .el-button--primary {
            border-radius: 5px;
            border: 1px solid #da213d !important;
            background-color: #fff !important;
            color: #da213d !important;
        }
    }
}
.add-address-show1 {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 700px;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.2);
    z-index: 20;
    .choose-type {
        padding-bottom: 20px;
    }
    .title {
        display: flex;
        width: 100%;
        height: 67px;
        align-items: center;
        background: #fbf0f0;
        justify-content: center;
        > div:nth-of-type(1) {
            font-size: 21px;
            color: #da213d;
        }
        img {
            display: block;
            width: 20px;
            height: 20px;
            font-size: 30px;
            color: #999999;
            position: absolute;
            right: 32px;
            cursor: pointer;
        }
    }
    .add-input {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 60px 0 30px;
        box-sizing: border-box;
    }
    .rule-form {
        width: 540px;
        justify-content: space-between;
        margin-top: 60px;
        button {
            width: 140px;
        }
        .btn-b {
            width: 240px;
            border-color: #da213d !important;
            background: #da213d !important;
            border-radius: 5px;
        }
        .el-button--primary {
            border-radius: 5px;
            border: 1px solid #da213d !important;
            background-color: #fff !important;
            color: #da213d !important;
        }
    }
}
.dialog-shade {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 18;
    background-color: rgba($color: #000000, $alpha: 0.4);
}

.el-cascader {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
}
.titles {
    font-size: 24px;
    color: #333333;
}
</style>